{extend name="style/base"/}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="__STATIC__/ext/layui-formSelects-master/dist/formSelects-v4.css"/>
<style>
	.headimg-box{display: inline-block;width: 40px;height: 40px;margin-right: 10px;}
	.headimg-box img{display: block;max-width: 100%;max-height: 100%;}
	.user-info{display: inline-block;margin-left: 10px;vertical-align: text-bottom;line-height: 1.4;}
	.account-box span{width: 50%;line-height: 1;}
	.account-box .account-box-title{display: inline-block;width: 60px;text-align-last: justify;vertical-align: middle;}
	.layui-table .layui-table-cell{overflow: initial;white-space: initial;line-height: 1.4;}
	.member-info{display: flex; align-items: center;}
	.default{cursor: pointer;}
</style>
{/block}
{block name="main"}
<div class="nc-function-search">
	<button class="layui-btn" lay-util="addMember">添加会员</button>
	<div class="layui-form">
		<div class="layui-input-inline nc-len-short">
			<select name="search_group">
				<option value="">会员组</option>
				{volist name="$group_list.data" id="group"}
				<option value="{$group.group_id}">{$group.group_name}</option>
				{/volist}
			</select>
		</div>
		<div class="layui-input-inline nc-len-short">
			<select name="search_label">
				<option value="">会员标签</option>
				{volist name="$label_list.data" id="label"}
				<option value="{$label.label_id}">{$label.label_name}</option>
				{/volist}
			</select>
		</div>
		<div class="layui-input-inline nc-len-tiny">
			<select name="search_status">
				<option value="">状态</option>
				<option value="1">正常</option>
				<option value="0">已锁定</option>
			</select>
		</div>
		<div class="layui-input-inline nc-len-mid">
			<input type="text" name="search_keys" placeholder="用户名/昵称/手机号" autocomplete="off" class="layui-input">
		</div>
		<button class='layui-btn-primary layui-btn' lay-submit lay-filter="searchForm">筛选</button>
	</div>
	<!--<div class="nc-form-row sm">-->
	<!--<button type="reset" class='layui-btn-primary layui-btn'>重置搜索条件</button>-->
	<!--</div>-->
</div>

<div class="nc-table-box">
	<table id="member_list" lay-filter="member"></table>
</div>
<script type="text/html" id="status">
	{{ d.status == 1 ? '正常' : '锁定' }}
</script>

<script type="text/html" id="username">
	<div class='member-info'>
		<div class='headframe'>
			{{# if(d.headimg != ""){ }}
			<img src="{{ nc.img(d.headimg) }}"/>
			{{# }else{ }}
			<img src="SITEHOME_IMG/default_user.png">
			{{# } }}
		</div>
		<div class='user-info'>
			{{# if(d.nick_name != ""){ }}
			<p>{{d.nick_name}}</p>
			{{# } }}
			{{# if(d.mobile != ""){ }}
			<p>{{d.mobile}}</p>
			{{# } }}
		</div>
	</div>
</script>

<script type="text/html" id="account">
	<div class="account-box">
		{foreach name="$account_config_info['data']['value']" item="vo"}
		{if condition="$vo['is_use'] eq 1"}
		<p><span class="account-box-title" >{$vo['name']}</span><b>：</b>{{ d['{$vo["key"]}']}}</p>
		{/if}
		{/foreach}
	</div>
</script>

<script id="membership_group" type="text/html">
	{{d.group_name == null ? '' : d.group_name}}
</script>

<script id="membership_label" type="text/html">
	{{# if (d.label_name != null) { }}
	{{# var arr = d.label_name.split(",") }}
	<div id="member_label_dl">
		{{# for (var index in arr) { }}
		{{'<span>' + arr[index] + '</span>'}}
		{{# } }}
	</div>
	{{# } }}
</script>

<script id="register_time" type="text/html">
	<div>注册时间 :{{nc.time_to_date(d.register_time)}}</div>
	<div>最后登录 : {{nc.time_to_date(d.last_login_time)}}</div>
</script>

<script id="last_login_time" type="text/html">
	{{nc.time_to_date(d.last_login_time)}}
</script>

<script type="text/html" id="operation">
	<a class="default" lay-event="manage">管理</a> |
	<a class="default" lay-event="locking">{{ d.status==1 ? '锁定' : '解锁' }}</a> |
	<a class="default" lay-event="del">删除</a>
	<!--	<a class="default" lay-event="reset">重置密码</a> |-->
</script>

<script type="text/html" id="batchOperation">
	<button class="layui-btn layui-btn-primary" lay-event="del">删除</button>
</script>

{/block}
{block name="script"}
<script type="text/html" id="member_html">
	<div class="layui-form member-form" id="user_info" lay-filter="form">
		<div class="layui-form-item">
			<label class="layui-form-label"><span class="required">*</span>用户名</label>
			<div class="layui-input-inline">
				<input type="text" name="username" value=""  placeholder="请输入昵称" lay-verify="username" autocomplete="off" class="layui-input nc-len-mid" maxlength="16">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span class="required">*</span>手机号</label>
			<div class="layui-input-inline">
				<input type="text" name="mobile" value="" placeholder="请输入手机号"  lay-verify="mobile" autocomplete="off" class="layui-input nc-len-mid" maxlength="11">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span class="required">*</span>邮箱</label>
			<div class="layui-input-inline">
				<input type="text" name="email" value="" placeholder="请输入邮箱" lay-verify="user_email" autocomplete="off" class="layui-input nc-len-mid" maxlength="50">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span class="required">*</span>密码</label>
			<div class="layui-input-block">
				<input type="password" name="password" id="password" value="123456" required placeholder="请输入密码" lay-verify="password" autocomplete="off" class="layui-input nc-len-mid" maxlength="18">
				<i class="layui-icon icon-show-pwd" onclick="editDisplayPwd(this)"></i>
			</div>
			<div class="layui-form-mid layui-word-aux">默认密码：123456</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-inline">
				<input type="text" name="real_name" id="real_name" value="" placeholder="请输入真实姓名" autocomplete="off" class="layui-input  nc-len-mid" maxlength="30">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">标签</label>
			<div class="layui-input-inline">
				<select name="member_label" class=" nc-len-mid" lay-filter="member_label" id="member_label" xm-select="selectLabel">
					<option value=""></option>
					{volist name="$label_list.data" id="label"}
					<option value="{$label.label_id}">{$label.label_name}</option>
					{/volist}
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">会员组</label>
			<div class="layui-input-inline">
				<select name="member_group" class="nc-len-mid" id="member_group" lay-verify="">
					<option value="">无</option>
					{volist name="$group_list.data" id="group"}
					<option value="{$group.group_id}">{$group.group_name}</option>
					{/volist}
				</select>
			</div>
		</div>
		<div class="nc-form-row">
			<button class="layui-btn" lay-submit lay-filter="formDome">保存</button>
			<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
		</div>
	</div>

</script>
<script type="text/javascript">
	//全局定义一次, 加载formSelects
	var formSelects;
	layui.config({
		base: '__STATIC__/ext/layui-formSelects-master/dist/' //此处路径请自行处理, 可以使用绝对路径
	}).extend({
		formSelects: 'formSelects-v4'
	});
	//加载模块
	layui.use(['jquery', 'formSelects'], function(){
		formSelects = layui.formSelects;
	});
</script>
<script type="text/javascript" src="__STATIC__/ext/layui-formSelects-master/dist/formSelects-v4.js" charset="utf-8"></script>
<script>
	var table,form,laytpl,layer_index;
	$(function () {
		
		table = new Table({
			elem : '#member_list',
			filter: "member",
			url : '{:addon_url("sitehome/member/memberlist")}',
			cols : [[
				{type : 'checkbox',align:'center',unresize : 'true'},
				{field : 'username', width : '25%', title : '账号', templet : '#username', align: 'left',unresize : 'true'},
				{field : 'group_name', width : '8%', title : '会员组', templet : '#member_group',unresize : 'true'},
				{ width : '15%', title : '账户', templet: '#account',unresize : 'true'},
				{field : 'status', width : '8%', title : '状态', templet : '#status',unresize : 'true'},
				{field : 'register_time', width : '25%', title : '注册&登录', templet : '#register_time',unresize : 'true'},
				{title : '操作',toolbar : '#operation',align: 'right',unresize : 'true'}
			]],
			bottomToolbar: "#batchOperation"
		});
		
		//批量操作
		table.bottomToolbar(function(obj){
			
			if(obj.data.length < 1){
				layer.msg('请选择要操作的数据');
				return;
			}
			
			switch(obj.event){
				case "del":
					var id_array = new Array();
					for(i in obj.data) id_array.push(obj.data[i].member_id);
					delMember(id_array.toString());
					break;
			}
			
		});
		
		//监听工具条
		table.tool(function(obj){
			var data = obj.data;
			switch (obj.event) {
				case 'locking':
					modifyMemberStatus(data);
					break;
				case 'del':
					delMember(data.member_id);
					break;
				case 'reset':
					restPass(data);
					break;
				case 'manage':
					location.href = nc.url("sitehome/member/memberDetails",{ member_id : data.member_id });
					break;
			}
		});
		
		layui.use(['laytpl', 'form', 'util'], function(){
			form = layui.form;
			laytpl = layui.laytpl;
			var repeat_flag = false;//防重复标识
			form.render();
			var util = layui.util;
			form.verify({
				username: function (value, item) {
					if (value == '' && $("input[name='mobile']").val() == '' && $("input[name='email']").val() == '') {
						return "用户名，手机号，邮箱必填一项";
					}
					if (value != '' && ! /^\w+$/.test(value)) {
						return "用户名只允许数字，字母与下划线";
					}
					if (value != '' && ! /^[a-z0-9_-]{3,16}$/.test(value)) {
						return "请输入3到16位的用户名";
					}
				},
				mobile: function (value, item) {
					if (value == '' && $("input[name='username']").val() == '' && $("input[name='email']").val() == '') {
						return "用户名，手机号，邮箱必填一项";
					}
					if (value != '' && ! /^(((13[0-9]{1})|(14[7]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/.test(value)) {
						return "请输入正确的手机号";
					}
				},
				user_email: function (value, item) {
					if (value == '' && $("input[name='mobile']").val() == '' && $("input[name='username']").val() == '') {
						return "用户名，手机号，邮箱必填一项";
					}
					if (value != '' && ! /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)) {
						return '邮箱格式不正确';
					}
				},
				password: function (value, item) {
					if (! /[\S]+/.test(value)) {
						return "密码不能为空";
					}
					if (/[\s]+/.test(value)) {
						return "密码不允许使用空格等特殊字符";
					}
					if (! /^[\S]{6,18}$/.test(value)) {
						return "请输入6到18位的密码";
					}
				},
				
			});
			
			form.on('submit(formDome)', function(data){
				var field = data.field;
				if(repeat_flag) return;
				repeat_flag = true;
				$.ajax({
					type : "post",
					url : '{:addon_url("sitehome/member/addmember")}',
					data : field,
					dataType: 'json',
					success : function(data){
						layer.msg(data.message);
						if(data.code == 0){
							table.reload();
							layer.closeAll('page');
						}
						repeat_flag = false;
					}
				});
			});
			
			form.on('submit(searchForm)', function(data){
				var field = data.field;
				table.reload({
					where: field,
					page: {
						curr : 1
					}
				});
			});
			
			//按钮事件
			util.event('lay-util', {
				addMember: function(othis){
					openMemberModel();
				}
			});
		});
		
		formSelects = layui.formSelects;
		/* formSelects.render('selectLabel'); */
	});
	
	/**
	 * 修改会员状态
	 */
	function modifyMemberStatus(data) {
		var status = 0;
		
		if(data.status == 0){
			status = 1;
		}
		var member_id = data.member_id;
		$.ajax({
			type : "post",
			async : false,
			url : '{:addon_url("sitehome/member/modifyMemberStatus")}',
			dataType: 'json',
			data : {
				'member_id' : member_id,
				'status' : status
			},
			success:function(res){
				layer.msg(res.message);
				if(res.code == 0){
					table.reload();
				}
			}
		})
	}
	
	/**
	 * 删除会员
	 */
	function delMember(member_id) {
		layer.confirm('确定删除吗?', {
			btn: ['确定','取消']
		},  function (index) {
			$.ajax({
				type:"post",
				async:false,
				url : '{:addon_url("sitehome/member/delmember")}',
				data: {'member_id':member_id},
				dataType: 'json',
				success:function(res){
					layer.msg(res.message);
					if(res.code == 0){
						table.reload();
					}
				}
			});
		}, function(){
			layer.close();
		});
	}
	
	/**
	 * 重置密码
	 */
	function restPass(data) {
		layer.confirm('确定重置密码吗?<br/> ' + '<span class="nc-text-color-999">默认密码：123456</span>',
			{
				btn: ['确定', '取消']
			}, function () {
				$.ajax({
					type: "post",
					async: false,
					url: '{:addon_url("sitehome/member/resetPass")}',
					data: {'member_id': data.member_id},
					dataType: 'json',
					success: function (res) {
						layer.msg(res.message);
						if (res.code == 0) {
							table.reload();
						}
					}
				});
			}, function () {
				layer.close();
			});
	}
	
	/**
	 * 显示密码
	 */
	function editDisplayPwd(elemnt) {
		if ($(elemnt).hasClass('icon-show-pwd')) {
			$(elemnt).removeClass('icon-show-pwd').addClass('icon-hide-pwd');
			$('#password').attr('type', 'text');
		} else {
			$(elemnt).removeClass('icon-hide-pwd').addClass('icon-show-pwd');
			$('#password').attr('type', 'password');
		}
	}
	
	/**
	 *编辑会员弹框
	 */
	function openMemberModel(data){
		if(data == undefined){
			title = "添加会员";
			data = {};
		}else{
			title = "修改会员";
		}
		var tpl_html = $("#member_html").html();
		laytpl(tpl_html).render(data, function(html){
			layer_index = layer.open({
				title: title,
				skin: 'layer-tips-class',
				type: 1,
				area: ['550px'],
				content: html,
			});
		});
		form.render();//重载form表单
	}
</script>
{/block}